// iview 布局案例
<template>

  <div class="layout">

    <!-- default -->
    <Row>
      <Col v-for='num in 24' :span='1' :key='num'>

      <div class='block' :class='{event: num%2 === 0}'>
        {{num}}
      </div>

      </Col>
    </Row>

    <!-- intervals -->
    <Row :gutter='16'>
      <Col v-for='num in 24' :span='1' :key='num'>
      <div class='block' :class='{event: num%2 === 0}'>
        {{num}}
      </div>

      </Col>
    </Row>

    <Row>
      <Col span='8' offset='2'>

      <div class="block">
        8
      </div>

      </Col>

      <Col span='3' offset='2'>

      <div class="event">
        3
      </div>

      </Col>

    </Row>

    <Row type='flex'>
      <Col :span='6' order='2'>
      <div class="block">
        before
      </div>
      </Col>

      <Col :span='18' order='1'>

      <div class="event">
        after
      </div>

      </Col>

    </Row>

    <Row type='flex' v-for='typeItem in flexRowLayout' :justify='typeItem'>
      <Col v-for='num in 4' :span='4'>

        <div class="block" :class='{event: num%2 ===0 }'>
            {{num}}
        </div>

      </Col>
    </Row>

    <Button v-for='classItem of genre' :type='classItem' :key='classItem'>
      {{classItem}}
    </Button>


    <br></br>

    <Button shape='circle' v-for='classItem of genre' :type='classItem' :key='classItem'>
      {{classItem}}
    </Button>

    <br></br>

    <Button v-for='classItem of size' :type='classItem' :key='classItem'>
      {{classItem}}
    </Button>

    <Button typ>
      long
    </Button>

    <br></br>
    
    <h1>Form</h1>
    
    <Row>
        <Col span='6' offset='9'>

            <h2> Input </h2>
            
            <Form>
                <FormItem label='clearable'>
                    <Input clearable></Input>
                </FormItem>

                <FormItem label='icon'>
                    <Input icon='close'></Input>
                </FormItem>

                <FormItem label="textarea">
                    <Input type="textarea" :row="10"></Input>
                </FormItem>

                <FormItem label="before-slot"><Input><span slot="prepend">https://</span></Input></FormItem>

                <FormItem label="after-slot"><Input><span slot="append">.com</span></Input></FormItem>

                <!-- 禁用， 灰底， 浅灰字 -->
                <FormItem label="disabled"><Input placeholder="disabled" disabled></Input></FormItem>

                <!-- 不能输入，但具有正常输入样式 -->
                <FormItem label="readonly"><Input placeholder="readonly" readonly></Input></FormItem>

                <!-- v-model 输出的值为数字， 普通为字符串 -->
                <FormItem label="number"><Input number></Input></FormItem>
                
                <FormItem label="autocomplete"><Input autocomplete="on"></Input></FormItem>
                
            </Form>

            <h2>radio</h2>
            <Form>

                <FormItem label="default">
                    <Radio>
                        default
                    </Radio>
                </FormItem>


                <FormItem label="radio-gruop">
                    <RadioGroup v-model='radio'>
                        <Radio v-for="name of students" :key="name" :label="name">{{name}}</Radio>                        
                    </RadioGroup>
                </FormItem>
                
                <FormItem label="radio-gruop">
                    <RadioGroup v-model='radio' type='button'>
                        <Radio v-for="name of students" :key="name" :label="name">{{name}}</Radio>                        
                    </RadioGroup>
                </FormItem>
                
            </Form>

            <h2>checkbox</h2>
            
            <Form>
                <FormItem label="checkbox">
                    <Checkbox>
                        default
                    </Checkbox>
                </FormItem>

                <FormItem label="checkbox-group">
                    <CheckboxGroup v-model='checkbox'>
                        <Checkbox :label="item" v-for="item of students" :key="item">
                            {{item}}
                        </Checkbox>
                    </CheckboxGroup>
                </FormItem>
            
            </Form>

            <h2>switch</h2>

            <Form>
                <FormItem label="default">
                    注意使用 i-switch 标签
                    <i-switch v-model="has" @on-change='switchChange' class='switch-default'></i-switch>
                </FormItem>

                <FormItem label="open">
                    <i-switch>
                        <Icon type="chevron-right" slot='open'></Icon>
                        <Icon type="arrow-shrink" slot='close'></Icon>
                    </i-switch>
                </FormItem>
                
            </Form>
            
            <h2>select</h2>

            <Form>
                <FormItem label="default">

                    <i-Select v-model='zoom'>
                        <i-option :value='animal.order' v-for='animal in animals' :key='animal'>{{animal.name}}</i-option>
                    </i-Select>
                    
                </FormItem>

                <FormItem label="group">

                    <i-Select v-model='zoom'>
                        <optionGroup label='zoom-1'>
                            <i-option :value='animal.order' v-for='animal in animals' :key='animal'>{{animal.name}}</i-option>
                        </optionGroup>
                         <optionGroup label='zoom-2'>
                            <i-option :value='animal.order' v-for='animal in animals' :key='animal'>{{animal.name}}</i-option>
                        </optionGroup>
                    </i-Select>

                </FormItem>

                <FormItem label='self'>
                    <i-Select>
                        <i-option label='monkey' value='monkey'>
                            <Icon type="heart"></Icon>
                        </i-option>
                         <i-option label='monkey' value='monkey'>
                             <Icon type="heart-broken"></Icon>
                        </i-option>
                    </i-Select>
                </FormItem>
                
            </Form>
            

        </Col>
    </Row>
   


  </div>

</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'


 class animalClass {
    name:string
    order:number
 }

  @Component
  export default class layout extends Vue {

    name: string = 'layout'

    animals:animalClass[] = [

        {
            name: 'tager',
            order: 1
        },
        {
            name: 'monkey',
            order: 2
        }
        
    ]

    zoom:number = 1

    has:boolean = true

    students:string[] = [
        'Coco',
        'Jeck',
        'Mick'
    ]

    radio:string = 'Coco'

    checkbox:string[] = []

    flexRowLayout: string[] = [
      'start',
      'space-around',
      'center',
      'space-between',
      'end',
    ]

    type: string[] = [

      'disabled'

    ]

    genre: string[] = [

      'info',
      'success',
      'warning',
      'error'

    ]

    size: string[] = [

      'large',
      'default',
      'small',
      'long'

    ]

    switchChange (status:boolean){

    }

  }

</script>

<style scoped lang='scss'>
  .layout {
    height: 100%;
    background: $default_bg;
    text-align: center;
   
  }

  .block {
    height: 1.2rem;
    background: $main_color;
    border-bottom: _rem(1px) solid #fff;

    line-height: 1rem;
    color: #fff;

  }

  .event {
    background: $danger_color;
  }

  .switch-default{
      transform: rotate(90deg);
  }

</style>
